<template>
  <div class="gameClass">
    <div class="header">
      <div class="top">
        <span @click="goBack"> <i class="iconfont icon-fanhui"></i>游戏</span>
        <input type="text">
        <i class="iconfont icon-xiazai"></i>
      </div>
    </div>
    <div class="classItem">
      <div class="item" @click="clickClassItem(item)" :class="{'itemActive':item.id==currentItme}" v-for="(item,index) in classItem" :key="index">
        <img :src="item.img" alt="">
        <span>{{item.txt}}</span>
      </div>
    </div>
    <game-list/>
  </div>
</template>
<script>
import gameList from "./com/gameList";
export default {
  name: "gameClass",
  components: {},
  data() {
    return {
      classItem: [
        {
          img: require("../../assets/img/棋牌.png"),
          txt: "棋牌",
          id: "1"
        },
        {
          img: require("../../assets/img/付费.png"),
          txt: "付费",
          id: "2"
        },
        {
          img: require("../../assets/img/网游.png"),
          txt: "网游",
          id: "3"
        },
        {
          img: require("../../assets/img/小游戏.png"),
          txt: "小游戏",
          id: "4"
        },
        {
          img: require("../../assets/img/直播.png"),
          txt: "直播",
          id: "5"
        }
      ],
      currentItme: "1"
    };
  },
  components: {
    gameList
  },
  methods: {
    clickClassItem(i) {
      this.currentItme = i.id;
    },
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="stylus" scoped>
.gameClass {
  height: 100%;
  background: #E8E8E8;

  .header {
    width: 100%;
    height: 1.17rem;
    background: linear-gradient(90deg, rgba(0, 174, 255, 1), rgba(0, 180, 255, 1), rgba(0, 120, 255, 1));
    padding: 35px 0;
    box-sizing: border-box;

    .top {
      width: 95%;
      height: 0.25rem;
      margin: 0 auto;

      span {
        color: #fff;
        margin-right: 0.08rem;

        i {
          font-size: 0.26rem;
          position: relative;
          top: 0.05rem;
          left: 0.05rem;
        }
      }

      .icon-xiazai {
        color: #fff;
        font-size: 0.18rem;
        position: relative;
        left: 0.18rem;
      }

      input {
        width: 2.31rem;
        height: 100%;
        background: #fff;
        color: #666;
        border-radius: 0.02rem;
      }
    }
  }

  .classItem {
    width: 3.55rem;
    height: 0.7rem;
    margin: 0 auto;
    position: relative;
    top: -0.3rem;
    background: #fff;
    border-radius: 0.08rem;
    display: flex;
    justify-content: space-around;
    padding: 0.12rem 0;
    box-sizing: border-box;

    .item:nth-child(1) {
      img {
        width: 20px;
        height: 21px;
      }
    }

    .item:nth-child(2) {
      img {
        width: 17px;
        height: 20px;
      }
    }

    .item:nth-child(3) {
      img {
        width: 20px;
        height: 14px;
        top: 5px;
      }
    }

    .item:nth-child(4) {
      img {
        width: 16px;
        height: 16px;
        top: 5px;
      }
    }

    .item:nth-child(5) {
      img {
        width: 17px;
        height: 14px;
        top: 5px;
      }
    }

    .item {
      text-align: center;
      font-size: 10px;
      color: #A1A1A1;
      position: relative;
      width: 0.9rem;

      img {
        display: block;
        margin: 5px auto;
        position: relative;
      }

      span {
        display: block;
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 100%;
      }
    }

    .itemActive {
      color: #006AEE;
    }
  }
}
</style>
